<clr-modal [(clrModalOpen)]="opened" [clrModalStaticBackdrop]="true" [clrModalClosable]="false">
    <h3 class="modal-title">{{'RESET_PWD' | translate}}</h3>
    <div class="modal-body body-format password-body">
        <form #forgotPasswordFrom="ngForm" clrForm>
            <clr-input-container>
                <label class="required">{{'APP_USERNAME' | translate}}</label>
                <input clrInput name="username" type="text" [(ngModel)]="item.username" required
                       id="username" size="50">
            </clr-input-container>
            <clr-input-container>
                <label class="required">{{'APP_EMAIL' | translate}}</label>
                <input clrInput name="reset_pwd_email" type="text"  [(ngModel)]="item.email"
                       required email id="reset_pwd_email" size="50">
                <clr-control-helper>{{'RESET_PWD_HELPER'|translate}}</clr-control-helper>
            </clr-input-container>
        </form>
        <app-modal-alert></app-modal-alert>
    </div>
    <div class="modal-footer">
        <span class="spinner spinner-inline loading-top" [hidden]="loading === false"></span>
        <button type="button" class="btn" (click)="close()">{{ 'APP_CANCEL' | translate}}</button>
        <button type="button" id="submit-btn" class="btn btn-primary"
                [disabled]="forgotPasswordFrom.invalid ||  loading"
                (click)="send()">{{'APP_COMMIT' | translate}}</button>
    </div>
</clr-modal>